<template>
  <div class="m-search_result">
     <h1>{{title}}</h1>
     <img :src="img">
     <ul v-for="(url,index) in urlArr">
       <li>
          <p>{{url.title}}</p>
          <button @click="watchVideo(index)">Watch</button>
          <!--<p>{{url.item | getWatchUrl}}</p>-->
       </li>
     </ul>
     <div class="robot-box">
      <!--找不到显示-->
      <p v-if="error">{{mesg}}</p>
      <i v-show="error" class="iconfont icon-robot"></i>
      <!--查找中显示或成功显示-->
      <i v-show="searching" class="iconfont icon-robot-laugh"></i>
    </div>
     
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'search-result',
  data () {
    return {
      searchTxt: this.$route.params.s || localStorage.getItem('searchTxt'),
      title: '',
      img: '',
      urlArr: [],
      searching: true,
      mesg: '好桑心，没有你想要的资源呢..',
      error: false
    }
  },
  mounted(){
    this.fetchResource()
  },
  methods:{
    fetchResource(){
      console.log(this.searchTxt)
      axios.get(proxy+"http://yuzhiwei.com.cn/video/?k="+this.searchTxt)
          .then((res)=>{
            this.searching = false;
            if(!res.data || !res.data instanceof Object || typeof res.data !=='object'){
              this.error = true;
              return;
            }
            this.title = res.data.title;
            this.img = res.data.img;
            this.urlArr = res.data.url
            console.log(res);
          })
          .catch((err)=>{
            this.error = true;
            this.searching = false;
            console.log(err)
          })
    },
    watchVideo(index){
      var url = "http://api.xfsub.com/index.php?url=" + this.urlArr[index].item
      window.location.href = url;
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
a{
  cursor: pointer;
}
.robot-box {
  margin-top: 30px;
}
.robot-box i{
  font-size: 1.00rem;
}
</style>
